<template>
  <a-descriptions bordered :column="column" >
    <template slot="title">
      <slot name="title" v-if="$slots.title"></slot>
      <span v-else>{{ title }}</span>
    </template>
    <a-descriptions-item v-for="(item, index) in datas" :key="index" :span="item.span ? Number(item.span) : 1">
      <div slot="label" :class="{ 'ant-form-item-required': prop(item.prop) }" style="min-width:90px;">{{ item.label }}</div>
      <a-form-model-item :prop="item.prop">
        <a-input
          v-if="item.tagType == 'input'"
          v-model="form[item.prop]"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
          :disabled="item.disabled"
          :class="item.class"
          :style="item.style"
          @change="handleInput"
        />
        <a-select
          v-else-if="item.tagType == 'selects'"
          v-model="form[item.prop]"
          placeholder="请选择"
          style = "width: 50%;margin-right: 150px;"
        >
          <a-select-opt-group label="一般分类">
            <a-select-option value="0101">
              {{ filterMultiDictText1('personnel_category','0101') }}
            </a-select-option>
            <a-select-option value="0102">
              {{ filterMultiDictText1('personnel_category','0102') }}
            </a-select-option>
            <a-select-option value="0103">
              {{ filterMultiDictText1('personnel_category','0103') }}
            </a-select-option>
            <a-select-option value="0104">
              {{ filterMultiDictText1('personnel_category','0104') }}
            </a-select-option>
            <a-select-option value="0105">
              {{ filterMultiDictText1('personnel_category','0105') }}
            </a-select-option>
            <a-select-option value="0106">
              {{ filterMultiDictText1('personnel_category','0106') }}
            </a-select-option>
            <a-select-option value="0107">
              {{ filterMultiDictText1('personnel_category','0107') }}
            </a-select-option>
            <a-select-option value="0199">
              {{ filterMultiDictText1('personnel_category','0199') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="专项分类">
            <a-select-option value="0201">
              {{ filterMultiDictText1('personnel_category','0201') }}
            </a-select-option>
            <a-select-option value="0202">
              {{ filterMultiDictText1('personnel_category','0202') }}
            </a-select-option>
            <a-select-option value="0203">
              {{ filterMultiDictText1('personnel_category','0203') }}
            </a-select-option>
            <a-select-option value="0204">
              {{ filterMultiDictText1('personnel_category','0204') }}
            </a-select-option>
            <a-select-option value="0205">
              {{ filterMultiDictText1('personnel_category','0205') }}
            </a-select-option>
            <a-select-option value="0206">
              {{ filterMultiDictText1('personnel_category','0206') }}
            </a-select-option>
            <a-select-option value="0207">
              {{ filterMultiDictText1('personnel_category','0207') }}
            </a-select-option>
            <a-select-option value="0299">
              {{ filterMultiDictText1('personnel_category','0299') }}
            </a-select-option>
          </a-select-opt-group>
        </a-select>
        <a-textarea
          v-else-if="item.tagType == 'textarea'"
          v-model="form[item.prop]"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
          :disabled="item.disabled"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          :class="item.class"
          :style="item.style"
        />
        <a-date-picker
          v-else-if="item.tagType == 'date-picker'"
          v-model="form[item.prop]"
          :valueFormat="item.format? item.format: 'YYYY-MM-DD HH:mm:ss'"
          show-time
          :disabled="item.disabled"
          :class="item.class"
          style="width: 100%"
          @change="handleInput"
        />
        <a-range-picker
          v-else-if="item.tagType == 'range-picker'"
          v-model="form[item.prop]"
          :valueFormat="item.format? item.format: 'YYYY-MM-DD HH:mm:ss'"
          :disabled="item.disabled"
          :class="item.class"
          :style="item.style"
          @change="handleInput"
        />
        <a-radio-group
          v-else-if="item.tagType == 'radio-group'"
          v-model="form[item.prop]"
          @change="onChange"
          :style="item.style">
          <a-radio v-for="index of item.arr" :value="index.val" :key="index">
            {{ index.key }}
          </a-radio>
        </a-radio-group>
        <j-dict-select-tag
          v-else-if="item.tagType == 'dict-select' && item.dictCode"
          v-model="form[item.prop]"
          :placeholder="item.placeholder ? item.placeholder : '请选择'"
          :disabled="item.disabled"
          :dictCode="item.dictCode+''"
          :type="item.type"
          :class="item.class"
          :style="item.style"
        />
        <!--空位-->
        <div v-else-if="item.tagType == 'tab'" :style="item.style"></div>
        <slot v-else :name="'slots-' + item.prop"></slot>
      </a-form-model-item>
    </a-descriptions-item>
  </a-descriptions>
</template>

<script>
import {getDictItemsFromCache} from "@api/api";

export default {

  props: {
    title: {
      type: String,
      default: ''
    },
    datas: {
      type: Array,
      default: () => {
        return []
      }
    },
    form: {
      type: Object
    },
    rules: {
      type: Object
    },
    column: {
      type: Number,
      default: 4
    }
  },
  methods: {
    filterMultiDictText1(dictCode, text) {
      // console.log(dictCode,text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    onChange(e) {
      console.log('radio checked', e.target.value);
    },
    prop(field) {
      let bool = false
      if (this.rules && Object.keys(this.rules).length>0 && this.rules[field]) {
        let item = this.rules[field].find((obj) => {
          return obj.required
        })
        bool = item && Object.keys(item).length > 0 && item.required ? item.required : false
      }
      return bool
    },
    handleInput(e = '') {
      let val
      if (Object.keys(e).includes('target')) {
        val = e.target.value
      } else {
        val = e
      }
      console.log(val)
      this.$emit('change', val)
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-descriptions-item-label {
  padding: 4px 6px !important;
}
/deep/.ant-descriptions-item-content {
  padding: 4px 10px !important;
}
/deep/.ant-descriptions-view {
  overflow: inherit;
}
/deep/.ant-form-item {
  margin-bottom: 0;
}
</style>
